<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Routing/Geocoding examples</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" language="javascript" src="js/OpenError.js"></script>
<script type="text/javascript" language="javascript" src="js/data_params.js"></script>
<script type="text/javascript" language="javascript" src="js/DispObjects.js"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var geocoder = new google.maps.Geocoder();
  var georesponse;
  
  var map;
  var oe;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(52.635,-1.13055)
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
	
	// create a new openerror object for introducing controlled error
	oe = new OpenError();
	oe.setDataSet(ptsLei2);  // var created on dataset.js file
	oe.setStandardDeviation(90); //1609.344);
	oe.setDebug( false );
	oe.setCorrelated( false );
	
	// create a new display object for organizing map data
	disp = new DispObject("map", "g3");
	//calcRoute();
  }
var resp;

  function geocode_response(response, status)
  {
	if(status == google.maps.GeocoderStatus.OK)
	{
		
		if( response.length > 1)
		{
			// added other locations as options
		}
		else
		{
			
		}
	}
  }
  function geocode()
  {
	var start = document.getElementById('start').value;
	var request = {
		address:start
	};
	geocoder.geocode(request, function(response, status) {
		if(status == google.maps.GeocoderStatus.OK)
		{
			if( response.length > 0)
			{
				var lat = response[0].geometry.location.lat();
				var lng = response[0].geometry.location.lng();
				//var coord = lat+","+lng;
				ptsLei.coordinates[0]=[lat, lng]; 
				document.getElementById('geocoded_start').value=lat+", "+lng;
				document.getElementById('start_zoom_link').onclick=(function() {map.panTo( new google.maps.LatLng( lat, lng) );});
			}
			else
			{
				
			}
		}
	});
	
	var end = document.getElementById('end').value;
	var request2 = {
		address:end
	};
	geocoder.geocode(request2, function(response, status) {
		if(status == google.maps.GeocoderStatus.OK)
		{
			if( response.length > 0)
			{
				var lat = response[0].geometry.location.lat();
				var lng = response[0].geometry.location.lng();
				//var coord = lat+","+lng;
				ptsLei.coordinates[1]=[lat, lng]; 
				document.getElementById('geocoded_end').value=lat+", "+lng;
				document.getElementById('end_zoom_link').onclick=(function() {map.panTo( new google.maps.LatLng( lat, lng) );});
			}
			else
			{
				
			}
		}
	});
  }
  function calcRouteTen()
  {
	for(var i=0;i<10;i++)
		calcRoute();
  }
  
  function calcRoute() {
  
	var points = disp.addPoints();
	disp.hidePoints();
	//begin = "london, uk"; //document.getElementById("start");
	//end = "leicester, uk"; //document.getElementById("end");
    begin = new google.maps.LatLng(points[0].lat, points[0].lon);
    end = new google.maps.LatLng(points[1].lat, points[1].lon);
		//var selectedMode = document.getElementById("mode").value;
    var request = {
        origin: begin,
        destination: end,
        // Note that Javascript allows us to access the constant
        // using square brackets and a string value as its
        // "property."
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        //directionsDisplay.setDirections(response);
		resp = response;
		
		

			polylineOptions = {
					map: map,
					strokeColor: "#FF0000",
					strokeOpacity: 0.3,
					strokeWeight: 5,
					path: response.routes[0].overview_path,
			}
			new google.maps.Polyline(polylineOptions);

      }
    });
  }
</script>
</head>
<FONT FACE="Arial, Helvetica, Geneva">
<body style="margin:0px; padding:0px;" onload="initialize()">
<div>
<b>Calculate a New Route: </b><br/>

<table>
	<tbody>
		<tr>
			<th id=pts></th>
			<th id=locations></th>
			<th id=coords>Geocoded Pts</th>
		</tr>
		<tr>
			<td>
				<strong>Start:</strong>
			</td>
			<td headers=locations>
				<input type=text id=start value="london, uk"/>
			</td>
			<td headers=coords>
				<input type=text id=geocoded_start disabled=disabled /><a href="#" id=start_zoom_link >Zoom to here</a>
			</td>
		</tr>
		<tr>
			<td>
				<strong>End:</strong>
			</td>
			<td headers=locations>
				<input type=text id=end value="leicester, uk" />
			</td>
			<td headers=coords>
				<input type=text id=geocoded_end disabled=disabled /><a href="#" id=end_zoom_link >Zoom to here</a>
			</td>
		</tr>
	</tbody>
</table>
			
<br/>
<input type="button" value="Geocode" onclick="geocode();" />
<input type="button" value="Route" onclick="calcRoute();" />
<input type="button" value="Route 10x" onclick="calcRouteTen();" />
</div>
<div id="map_canvas" style="width:100%; height:80%"></div>
<p><a href='./index.html'><i>OpenError</i></a></p>
</body>
</html>
